/**
 * 子组件声明
 * 使用 Parent.child 形式的 JSX 可以让节点父子关系更加直观
 * 相比ParentChild这种命名方式, Parent.Child更为优雅些
 */
import React, { PropsWithChildren } from 'react';

export interface LayoutProps {}

export interface LayoutHeaderProps {} // 采用 ParentChildProps 形式命名
export interface LayoutFooterProps {}

export function Layout(props: PropsWithChildren<LayoutProps>) {
  return <div>{props.children}</div>;
}

// 作为父组件的属性
Layout.Header = (props: PropsWithChildren<LayoutHeaderProps>) => {
  return <div>{props.children}</div>;
};
Layout.Footer = (props: PropsWithChildren<LayoutFooterProps>) => {
  return <div>{props.children}</div>;
};

export default function() {
  return (
    <Layout>
      <Layout.Header>header</Layout.Header>
      <Layout.Footer>footer</Layout.Footer>
    </Layout>
  );
}
